<template>
	<view>

		<view v-for="item in list" class="list">
			<view>
				<image :src="item.thumb" />
				<view>
					<view>
						<view>{{item.name}}</view>
						<view>{{sex(item.sex)}}</view>
					</view>
					<view>
						<view>{{item.score}}</view>
						<view v-if="item.title">{{item.title}}</view>
					</view>
				</view>

			</view>

			<u-collapse :border="false">
				<u-collapse-item title="医生介绍">
					<view v-html="item.content"></view>
				</u-collapse-item>
			</u-collapse>

		</view>

		<u-empty mode="list" text="暂无医生" v-if="empty">
		</u-empty>

	</view>
</template>

<script>
	import {
		doctorIndex,
		doctorSeay
	} from '../../request/index.js'
	import baseUrl from '../../request/baseUrl.js'
	export default {
		data() {
			return {
				list: [],
				empty: false,
			}
		},
		onLoad(params) {
			console.log(params);
			this.request(params.id).then(res => {
				console.log(res);
				let list = res.data.list || res.data.data;
				this.list = list && list.length ? list.map(item => {
					if (item.thumb.indexOf('https://thirdwx.qlogo.cn') < 0 && item.thumb.indexOf(baseUrl) <
						0) {
						item.thumb = baseUrl + item.thumb
					}
					return item
				}) : this.empty = true;
				console.log(this.list[0]);
			});
		},
		methods: {
			sex(value) {
				switch (value) {
					case 1:
						return `男`;
					case 2:
						return `女`;
				}
			},
			request(paramsId) {
				if (paramsId) {
					return doctorIndex({
						id: paramsId
					})
				} else {
					return doctorSeay()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 2vh 3.5%;
		background: #efefef;
		box-sizing: border-box;
	}

	.list {
		width: 100%;
		margin-bottom: 2.5vh;
		background: white;
		padding: 1.5vh 3.5% 0 3.5%;
		box-sizing: border-box;
		border-radius: 10px;

		>view:first-child {
			display: flex;
			align-items: center;
			margin-bottom: 1vh;

			>image {
				width: 14vw;
				height: 14vw;
				border-radius: 50%;
				margin-right: 5vw;
			}

			>view {
				display: flex;
				flex: 1;
				justify-content: space-between;

				>view:first-child {
					>view:nth-child(2)::before {
						content: '性别：'
					}
				}

				>view:last-child {
					margin-right: 20%;

					>view:first-child {
						font-size: 14px;

						&::before {
							content: '好评分：';
							font-size: 16px;
						}
					}
				}

			}


		}
	}
</style>
